<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 1000px;
				height: 800px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">
			<canvas id="canvasone" width="1000" height="800"></canvas>
			
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let oPen=oneCanvas.getContext('2d');
			
//			for(var i=1;i<=7;i++){
//				for(var k=0;k<=7-i;k++){
//					document.write('&nbsp');
//				}
//				
//				for(var j=1;j<=2*i-1;j++){
//					document.write('*');
//				}
//				document.write('<br/>');
//			
//			}
//			
//			let n=6;
//			let str='';
//			for(var i=0;i<=n;i++){
//				for (var j=0;j<=i;j++){
//					str+='*';
//				}str+='\n';
//			}console.log(str);
			
			
//		oPen.lineWidth=10;
	//		oPen.arc(200,200,90,0,Math.PI*2,true);
//			oPen.stroke();
//			
//			oPen.lineWidth=10;
//			oPen.moveTo(260,310);
//			

//         var sum=0;
//			for(var i=0;i<=100;i++){
//				sum=sum+i;
//				
//			}
//			console.dir(sum)


			let qqq=[{value:10,color:"green",name:'one'},
					{value:20,color:'blue',name:'two'},
					{value:40,color:'red',name:'three'},
					{value:100,color:'purple',name:'four'}];
			let sum=0;
			for(var i=0;i<qqq.length;i++){
				sum=sum+qqq[i].value;
				console.log(sum);
			}
			let temp=Math.PI/180*0;				
			function createSector(obj,x,y,r){
				for(var i=0;i<qqq.length;i++){				
					obj.beginPath();
					obj.moveTo(x,y);
					console.log(temp);
					obj.arc(x,y,r,temp,Math.PI/180*(qqq[i].value/sum*360)+temp,false);					
					obj.stroke();
					console.log(qqq[i].color);
					obj.fillStyle=qqq[i].color;
					obj.fill();										
					temp= Math.PI/180*(qqq[i].value/sum*360)+temp;
					console.log(temp);
					obj.closePath();
					
					
				}
			
			}
			createSector(oPen,400,400,100);
			
			
			
//			oPen.beginPath();
//			
	//	oPen.arc(200,310,60,0,Math.PI/180*(-180),true);
//			
//			oPen.closePath();
//			oPen.stroke();
//						
//			oPen.fillStyle='black'
//			oPen.fill();
//			
//			oPen.moveTo(200,200);   // r=20
//			oPen.lineTo(380,200);
//			oPen.arcTo(400,200,400,220,20);
//			oPen.lineTo(400,480);
//			
//			oPen.arcTo(400,500,380,500,20);
//			oPen.lineTo(200,500);
//			
//			oPen.arcTo(180,500,180,480,20);
//			oPen.lineTo(180,220);
//			
//			
//			oPen.arcTo(180,200,200,200,20);
//			oPen.stroke();
			
			function yj(a,b,c,d,r){
				oPen.moveTo(a+r,b);
				oPen.lineTo(c-r,b);
				oPen.arcTo(c,b,c,b+r,r);
				oPen.lineTo(c,d-r);
				oPen.arcTo(c,d,c-r,d,r);
				oPen.lineTo(a+r,d);
				oPen.arcTo(a,d,a,d-r,r);
				oPen.lineTo(a,b+r);
				oPen.arcTo(a,b,a+r,b,r);
				oPen.stroke();
			}
			
			
			//yj(500,500,700,700,100);
			
			
			//qq(oPen,100,100,60,60,50);
			function qq(pen,c,k,x,y,r){
				pen.moveTo(x+r,y);
				pen.lineTo(x+c-r,y);
				pen.arcTo(x+c,y,x+c,y+r,r);
				pen.lineTo(x+c,y+k-r);
				pen.arcTo(x+c,y+k,x+c-r,y+k,r);
				pen.lineTo(x+r,y+k);
				pen.arcTo(x,y+k,x,y+k-r,r);
				pen.lineTo(x,y+r);
				pen.arcTo(x,y,x+r,y,r);
				pen.stroke();
			}
			
//			oPen.quadraticCurveTo(650,200,600,500);
//			oPen.stroke();
//			oPen.moveTo(600,500);
//			oPen.quadraticCurveTo(580,600,400,600);
//			oPen.stroke();
//			
//			oPen.moveTo(400,595);
//			oPen.lineTo(379,680);
//			oPen.stroke();
//			
//			oPen.moveTo(380,680);
//			oPen.lineTo(350,595);
//			oPen.stroke();
//			
//			oPen.moveTo(350,600);
//			oPen.quadraticCurveTo(300,625,270,530);
//			oPen.stroke();
//			
//			oPen.moveTo(270,530);
//			oPen.quadraticCurveTo(185,329,270,306);
//			oPen.stroke();
//			
//			
//			oPen.moveTo(708,125);
//			oPen.bezierCurveTo(815,5,857,290,712,364);
//			
//			oPen.moveTo(708,125);
//			oPen.bezierCurveTo(612,5,570,310,712,364);
//			
//			oPen.stroke();
//			
//			
//			oPen.moveTo(800,600);
//			oPen.bezierCurveTo(880,530,880,660,800,670);
//			oPen.stroke();
//			
//			oPen.moveTo(805,600);
//			oPen.bezierCurveTo(720,530,720,660,800,670);		
//			oPen.stroke();
			
			
			
		}
	</script>
</html>
